<template>
  <div class="menu-container">
    <el-carousel height="100%">
      <el-carousel-item v-for="item in 2" :key="item">
        <ul>
          <li>
            <img src="../assets/images/菜单图标/3e9a7e6117c23567.png" alt="">
            <p>超市</p>
          </li>
          <li>
            <img src="../assets/images/菜单图标/4d296af06aa89e5b.png" alt="">
            <p>买菜</p>
          </li>
          <li>
            <img src="../assets/images/菜单图标/4e3ede9e1046b17f.png" alt="">
            <p>水果</p>
          </li>
          <li>
            <img src="../assets/images/菜单图标/5d79f0aa0409960c.png" alt="">
            <p>鲜花礼品</p>
          </li>
          <li>
            <img src="../assets/images/菜单图标/f7bb4a0bff29de56.png" alt="">
            <p>送药上门</p>
          </li>
          <li>
            <img src="../assets/images/菜单图标/7d8eb3bd65d9e457.png" alt="">
            <p>家居时尚</p>
          </li>
          <li>
            <img src="../assets/images/菜单图标/8f9b1b161d2a638f.png" alt="">
            <p>烘烤蛋糕</p>
          </li>
          <li>
            <img src="../assets/images/菜单图标/4639f5e3ed6e1463.png" alt="">
            <p>签到</p>
          </li>
          <li>
            <img src="../assets/images/菜单图标/2001046c7a0d0393.png" alt="">
            <p>仙豆庄园</p></li>
          <li>
            <img src="../assets/images/菜单图标/a4ab00f2bffcbcb1.png" alt="">
            <p>领现金</p>
          </li>
        </ul>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  export default {
    name: "",
    data(){
      return {

      }
    }
  }
</script>

<style lang="scss" scoped>
.menu-container{
  background: url("../assets/images/f43f3e48a4ccc4e8.jpg") no-repeat;
  -webkit-background-size: 100%;
  background-size: 100%;
  overflow: hidden;
  height: 480px;
  transform: translateY(-2px);
  .el-carousel{
    height: 100%;
  }
  /*.el-carousel__container{*/
    /*height: 100%;*/
  /*}*/
  ul{
    margin: 0;
    padding: 0;
    justify-content: space-around;
    flex-wrap: wrap;
    display: flex;
    li{
      list-style: none;
      width: 20%;
      text-align: center;
      height: 50%;
      img{
        height: 125px;
        padding-top: 20px;
      }
      p{
        margin-top: 30px;
        font-size: 38px;
        font-weight: bold;
        margin-bottom: 0;
      }
    }
  }
}
</style>
